<template>
  <div class="recharge-container">
    <el-form
      :model="rechargeForm"
      label-width="auto"
      style="width: 100%"
      :rules="rechargeRules"
      ref="rechargeFormRef"
    >
      <el-form-item :label="$t('msg.member.rechargeMoney')" prop="relatedMoney">
        <el-input
          name="relatedMoney"
          v-model="rechargeForm.relatedMoney"
          min="0"
          type="number"
        >
          <template #prepend>￥</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('msg.member.presentMoney')">
        <el-input v-model="rechargeForm.presentMoney" min="0" type="number">
          <template #prepend>￥</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('msg.member.totalMoney')">
        <el-input
          v-model="rechargeForm.totalMoney"
          :value="totalMoney"
          readonly
        >
          <template #prepend>￥</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('msg.member.remark')">
        <el-input v-model="rechargeForm.remark" type="textarea" />
      </el-form-item>
      <el-form-item :label="$t('msg.member.payType')">
        <icon-text
          class="icon-text"
          v-for="(item, index) in icons"
          :key="index"
          :icon="item.icon"
          :text="item.text"
          :className="item.className"
          :color="item.color"
          :selected="rechargeForm.payType === index"
          @selected="handleSelect(index)"
        />
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" :loading="loading" @click="handlerEdit">{{
          $t('msg.btn.recharge')
        }}</el-button>
        <el-button>{{ $t('msg.btn.cancel') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, defineProps, computed, defineEmits } from 'vue'
import IconText from '@/components/IconText'
import { memberRecharge } from '@/api/member'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { validateRelatedMoney } from './rules'
const i18n = useI18n()
const props = defineProps({
  memberInfo: {
    type: Object,
    required: true
  }
})
const emits = defineEmits(['switch-tab'])
const rechargeFormRef = ref(null)
const rechargeRules = ref({
  relatedMoney: [
    {
      trigger: 'blur',
      validator: validateRelatedMoney(),
      required: true
    }
  ]
})

const memberData = ref({ ...props.memberInfo })
const rechargeForm = ref({
  payType: 0,
  relatedMoney: 0,
  presentMoney: 0,
  totalMoney: 0,
  remark: ''
})
const icons = ref([
  { icon: 'pay-cash', text: '现金', className: 'cash', color: '#bf723e' },
  { icon: 'pay-wechat', text: '微信', className: 'wechat', color: '#48B338' },
  { icon: 'pay-ali', text: '支付宝', className: 'ali', color: '#009fe8' },
  { icon: 'pay-union', text: '银行卡', className: 'union', color: '#951c0c' }
])

const resetForm = () => {
  rechargeForm.value = {
    payType: 0,
    relatedMoney: 0,
    presentMoney: 0,
    totalMoney: 0,
    remark: ''
  }
}

const loading = ref(false)
// 计算总金额
const totalMoney = computed(() => {
  return (
    Number(rechargeForm.value.relatedMoney) +
    Number(rechargeForm.value.presentMoney)
  )
})
const handleSelect = (index) => {
  rechargeForm.value.payType = index // 更新选中的索引
}

const handlerEdit = () => {
  rechargeFormRef.value.validate((valid) => {
    console.log(valid)
    if (!valid) return
    loading.value = true
    rechargeForm.value.memberId = memberData.value.id
    rechargeForm.value.totalMoney = totalMoney
    memberRecharge(rechargeForm.value)
      .then(() => {
        loading.value = false
        ElMessage.success(i18n.t('msg.member.rechargeSuccess'))
        resetForm()
        emits('switch-tab', 'balanceInfo')
      })
      .catch((err) => {
        console.log(err)
        loading.value = false
      })
  })
}
</script>

<style lang="scss" scoped>
.recharge-container {
  width: 800px;
  margin: 40px auto;
  .el-form-item {
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
  }
  .icon-text {
    margin-right: 20px;
  }
  .btns {
    ::v-deep .el-form-item__content {
      display: block;
      text-align: center;
    }
  }
}
</style>
